<template>
    <view class="main">
        <view class="ip-item" v-for="(item, index) in formDataList" :key="index">
            <input type="text" v-if="!item.textA && item.type != 'avatar'" :placeholder="item.name"
                placeholder-class="ip"
                :disabled="item.type == 'sex' || item.type == 'city' || item.type == 'birthday' || item.type == 'avatar'"
                v-model="item.value">
            <view v-if="item.type == 'avatar'" @click="uploadAvatar"
                style="font-size: 32rpx;color: #bbbbbb;width: 100%;height: 100%;">头像</view>
            <view class="avatar" v-if="item.type == 'avatar'">
                <image :src="item.value" mode="aspectFill" @click="uploadAvatar" />
            </view>

            <image src="/static/icon/down.svg" mode="widthFix" v-if="item.isPop" />
            <textarea v-if="item.textA" maxlength="300" type="text" :placeholder="item.name" placeholder-class="ip"
                class="text-area" v-model="item.value" />

            <view class="block" v-if="item.type == 'sex' || item.type == 'city' || item.type == 'birthday'"
                @click="select(item, index)"></view>
        </view>
    </view>
    <view class="btns">
        <Button @clickButton="carete" :loading="loading" loading-text="修改中" text="确认修改" />
    </view>

    <!-- 性别 -->
    <van-popup v-model:show="showPickerSex" round position="bottom">
        <van-picker :columns="columns" @cancel="showPickerSex = false" @confirm="onConfirm" />
    </van-popup>

    <!-- 生日 -->
    <van-popup v-model:show="birthdayShow" round position="bottom">
        <van-date-picker v-model="currentDate" @confirm="birthdayConfirm" title="生日" :min-date="mineDate" />
    </van-popup>

    <!-- 城市 -->
    <van-popup v-model:show="cityShow" round position="bottom">
        <van-area title="常驻城市" :area-list="areaList" @confirm="cityConfirm" />
    </van-popup>
</template>

<script setup>
import { ref, watch } from 'vue';
import { onLoad } from '@dcloudio/uni-app'
import { areaList } from '@vant/area-data';
import { uploadImage, deleteObjectEmptyKey } from '@/utils/util'
import { getUserInfo, updateUserInfo } from '@/api/apiList'


// 头像上传
const uploadAvatar = async () => {
    const res = await uploadImage(1)
    formDataList.value[0].value = res[0]
}

// 性别
const showPickerSex = ref(false)
const columns = [
    { text: '男', value: '1' },
    { text: '女', value: '0' },
];
const onConfirm = (data) => {
    formDataList.value[8].value = data.selectedOptions[0].value
    formDataList.value[8].value = formDataList.value[8].value == 1 ? '男' : '女'
    showPickerSex.value = false
}

// 生日
const birthdayShow = ref(false)
const currentDate = ref(['2014', '01', '01'])
const mineDate = ref(new Date(1900, 1, 1));
const birthdayConfirm = (data) => {
    formDataList.value[13].value = data.selectedValues.join('-')
    birthdayShow.value = false
}

// 城市
const cityShow = ref(false)
const cityConfirm = (data) => {
    const arr = ref([])
    data.selectedOptions.forEach(item => arr.value.push(item.text))
    formDataList.value[12].value = arr.value.join('-')
    cityShow.value = false
    console.log(data, 'city')
}

// 选择弹窗
const select = (item, _index) => {
    const { type } = item
    switch (type) {
        case 'sex':
            showPickerSex.value = true
            break
        case 'birthday':
            birthdayShow.value = true
            break
        case 'city':
            cityShow.value = true
            break
    }
    console.log(item, 'item')
}


const formDataList = ref([
    { name: '头像', type: 'avatar', inputType: '', maxLength: '', isPop: false, value: '' },
    { name: '请填写姓名', type: 'userName', inputType: 'text', maxLength: 8, isPop: false, value: '' },
    { name: '请填写单位/公司', type: 'company', inputType: 'text', maxLength: 12, isPop: false, value: '' },
    { name: '请填写部门职位', type: 'department', inputType: 'text', maxLength: 12, isPop: false, value: '' },
    { name: '请填写手机号', type: 'phonenumber', inputType: 'number', maxLength: 11, isPop: false, value: '' },
    { name: '请填写邮箱', type: 'email', inputType: 'text', maxLength: 20, isPop: false, value: '' },
    { name: '请填写微信号', type: 'wx', inputType: 'text', maxLength: 20, isPop: false, value: '' },
    { name: '请填写QQ', type: 'qq', inputType: 'number', maxLength: 11, isPop: false, value: '' },
    { name: '请选择性别', type: 'sex', inputType: 'text', maxLength: '', isPop: true, value: '' },
    { name: '请填写毕业学校', type: 'school', inputType: 'text', maxLength: 20, isPop: false, value: '' },
    { name: '请填写家乡', type: 'home', inputType: 'text', maxLength: 20, isPop: false, value: '' },
    { name: '请填写地址', type: 'address', inputType: 'text', maxLength: 30, isPop: false, value: '' },
    { name: '请选择常住城市', type: 'city', inputType: 'text', maxLength: '', isPop: true, value: '' },
    { name: '请选择生日', type: 'birthday', inputType: 'text', maxLength: '', isPop: true, value: '' },
    { name: '请描述业务或专长', type: 'speciality', inputType: 'text', maxLength: '', isPop: false, value: '', textA: true },
    { name: '请描述公司介绍', type: 'summary', inputType: 'text', maxLength: '', isPop: false, value: '', textA: true },

])

onLoad((option) => {
    getUser()
})

const userInfo = ref({})
const getUser = async () => {
    const res = await getUserInfo()
    if (res.code == 200) {
        userInfo.value = res.data
        userInfo.value.sex = userInfo.value.sex == 1 ? '男' : '女'
        formDataList.value.forEach(item => {
            for (const key in userInfo.value) {
                if (item.type == key) item.value = userInfo.value[key]
            }
        })
    }
}

const loading = ref(false)
const carete = async () => {
    let formData = {}
    for (const key in formDataList.value) {
        if (Object.prototype.hasOwnProperty.call(formDataList.value, key)) {
            const element = formDataList.value[key];
            if (!formData[element.type]) {
                formData[element.type] = element.value
            }
        }
    }
    formData.sex = formData.sex == '男' ? 1 : 0
    const newFormData = deleteObjectEmptyKey(formData)
    newFormData.userId = userInfo.value.userId
    const res = await updateUserInfo(newFormData)
    loading.value = true
    if (res.code == 200) {
        loading.value = false
        uni.showToast({
            title: '提交成功',
            icon: 'none'
        })
        setTimeout(() => {
            uni.navigateBack()
        }, 2000);
    }
}
</script>

<style lang="scss" scoped>
.main {
    padding: 30rpx 30rpx 200rpx 30rpx;
}

.must {
    color: #AAAAAA;
}

.active {
    color: #0753FD !important;
}



.btns {
    padding: 30rpx;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
}

.pop-main {
    .pop-title {
        border-bottom: 1rpx solid #eee;
        padding: 34rpx 40rpx;

        .cancel,
        .confirm {
            font-family: PingFang SC Bold;
            font-size: 32rpx;
        }

        .cancel {
            color: #AAAAAA;
        }

        .confirm {
            color: #0753FD;
        }
    }

    .list {
        padding: 0 40rpx;

        .scroll-Y {
            height: 1000rpx;
            max-height: 1000rpx;

            .item {
                font-family: PingFang SC Bold;
                font-size: 28rpx;
                font-weight: normal;
                padding: 25rpx 0;
            }
        }
    }
}
</style>